<script setup lang="ts">
import NavTitle from "@/components/NavTitle/index.vue";
import { onTagDown } from "./scripts/index";
import CleverIcon from "@/assets/clever.png";
const prop = defineProps({
    tagList: {
        type: Array<any>,
        default: ["tag1aa", "tag2", "tag3", "tag4", "tag5"]
    },
    isMore: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: "标题"
    },
    onMore: function () {}
});
function getName(item: any) {
    let char = item;
    if (item.name === null) {
        char = item.tokenAddress;
    }
    if (typeof item.name === "string") {
        char = item.name;
    }
    return char;
}
</script>
<template>
    <div class="tags">
        <NavTitle :is-more="prop.isMore" :title="prop.title"></NavTitle>
        <VRow no-gutters>
            <VCol v-for="item in prop.tagList" cols="3.5" class="mt-1">
                <v-chip class="rounded c-title-5" variant="outlined" @click="() => onTagDown(item)">
                    <p class="label" :title="getName(item)">{{ getName(item) }}</p>
                </v-chip>
            </VCol>
        </VRow>
    </div>
</template>
<style lang="less" scoped>
.v-col {
    max-width: 20%;
}
.tags {
    .v-col{
        margin-bottom: 10px !important;
        .v-chip{
            border: none;
        }
    }
    width: 656px;

    .b-title {
        margin: 0;

        span {
            font-size: 15px;
        }

        div span {
            font-size: 12px;
        }
    }

    .v-chip__content {
        width: 100%;
    }

    .v-chip {
        width: 127px;
        height: 32px;
        margin: 0 !important;
        border: 0.1px solid var(--card);
        background-color: #0c0e10;
        background-color: #2d3339;
        // background-color: rgba($color: #000000, $alpha: 0.8);

        .label {
            width: 105px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
